<template>
	<view>
		<v-input v-model:value="value" placeholder="小型文本框" size="small" />
		<v-input v-model:value="value" />
		<v-input v-model:value="value" placeholder="大型文本框" size="large" />
		<hr />
		<v-input v-model:value="value" placeholder="文本框" :maxlength="10" :show-counter="true" />
		<v-input v-model:value="value" type="password" placeholder="密码框" />
		<v-input v-model:value="value" type="number" placeholder="数字框" />
		<v-input v-model:value="value" placeholder="禁用框" disabled />
		<hr />
		<v-input v-model:value="value" :placeholder="['搜索框', '内裤', '衣服']" @confirm="handleSearch" />
		<v-input v-model:value="value" placeholder="无边框模式" border-model="none" />
		<v-input v-model:value="value" placeholder="底边框模式" border-model="bottom" />
		<v-input v-model:value="value" placeholder="上边框模式" border-model="top" />
		<v-input v-model:value="value" placeholder="左边框模式" border-model="left" />
		<v-input v-model:value="value" placeholder="右边框模式" border-model="right" />
		<v-input v-model:value="value" placeholder="两端边框模式" border-model="ends" />
		<v-input v-model:value="value" placeholder="上下边框模式" border-model="up-down" />
		<hr />
		<v-input v-model:value="value" placeholder="右组合文本框" :combination-config="combinationConfig" />
		<v-input v-model:value="value" placeholder="自定义组合文本框" :combination-config="customizeCombinationConfig">
			<template v-slot:left>
				<v-button>自定义按钮</v-button>
			</template>
		</v-input>
	</view>
</template>

<script setup>
import { ref } from 'vue';
let value = ref();

const handleSearch = (value) => {
	console.log('v-uni-app ui', value);
};
//自定义配置信息
const customizeCombinationConfig = { isShow: true, position: 'left' };
//组合文本框配置信息
const combinationConfig = {
	isShow: true,
	position: 'right',
	buttonText: '搜索'
};
</script>

<style>
.input-combination {
	width: 540rpx;
	margin: 20rpx auto;
}
.search-container {
	width: 540rpx;
	margin: 20rpx auto;
}
</style>
